<template>
  <div class="ele-body">
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="状态:">
              <a-select
                show-search
                v-model:value="where.realtimeCalState"
                style="width: 180px"
                :show-arrow="false"
                :filter-option="false"
                :not-found-content="null"
                allow-clear
              >
                <a-select-option value='running'>行驶中</a-select-option>
                <a-select-option value='idling'>怠速</a-select-option>
                <a-select-option value='ignition_off'>熄火</a-select-option>
                <a-select-option value='offline'>离线</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
        <a-divider style="margin-top: 8px;margin-bottom: 8px;" />
        <div>
          <span><a-image :width="45" height="20" src="https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/running.png"/>行驶中：{{realtimeStateCount.runningCount}}</span>
          <span style="margin-left: 25px;"><a-image :width="45" height="20" src="https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/idling.png"/>怠速: {{realtimeStateCount.idlingCount}}</span>
          <span style="margin-left: 25px;"><a-image :width="45" height="20" src="https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/ignition_off.png"/>熄火: {{realtimeStateCount.ignitionOffCount}}</span>
          <span style="margin-left: 25px;"><a-image :width="45" height="20" src="https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/offline.png"/>离线: {{realtimeStateCount.offlineCount}}</span>
        </div>
      </a-card>
    </div>

    <div>
      <baidu-map
        ak="OsoBFa0ZqPGS0UpqiiF0rVHsBp0kfQ5F"
        class="map"
        style="height: 100vh;"
        :zoom="12"
        :scroll-wheel-zoom="true"
        :center="{ lng: 105.000, lat: 38.000 }"
        @init="addPoints"
      >
        <template v-for="(item, index) in pointList">
          <bm-marker :position="item.point" :dragging="true" :icon="{url: item.icon_url, size: {width: 45, height: 20}}"></bm-marker>
        </template>
      </baidu-map>
    </div>

  </div>
</template>

<script>
import { BaiduMap, BmMarker } from 'vue-baidu-map-3x'
import {VehicleApi} from "@/api/property/vechile/VehicleApi";

export default {
  name: 'VehicleManagerVehicleBmpoint',
  components: {
    BaiduMap,
    BmMarker
  },
  data() {
    return {
      // 表格搜索条件
      pointList : [],
      realtimeStateCount : {},
      where : {},
    };
  },
  created() {

  },
  async mounted() {
    this.getRealtimeStateCount();
    this.getPositionPointsList();
  },
  methods: {
    reset() {
      this.where.realtimeCalState = '';
      this.getPositionPointsList();
      this.getPositionPointsList();
    },
    reload() {
      this.getPositionPointsList();
      this.getPositionPointsList();
    },
    getRealtimeStateCount() {
      let that = this;
      VehicleApi.realtimeStateCount({}).then(resp => {
        console.log(resp);
        if (resp && resp.data) {
          that.realtimeStateCount = resp.data;
        }
      });
    },
    getPositionPointsList() {
      let that = this;
      let pointAlls = [];
      VehicleApi.positionPointsList({"realtimeCalState" : this.where.realtimeCalState}).then(resp => {
        if (resp && resp.data && resp.data.length > 0) {
          resp.data.forEach(function(item) {
            let formatItem = {
              point : {
                lng : item.vehicleRealtimeData.bdLongitude,
                lat : item.vehicleRealtimeData.bdLatitude
              },
              icon_url : ''
            };
            if (item.realtimeCalState == 'offline') {
              formatItem.icon_url = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/offline.png';
            } else if (item.realtimeCalState == 'running') {
              formatItem.icon_url = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/running.png';
            } else if (item.realtimeCalState == 'idling') {
              formatItem.icon_url = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/idling.png';
            } else if (item.realtimeCalState == 'ignition_off') {
              formatItem.icon_url = 'https://moreycow.oss-cn-hangzhou.aliyuncs.com/vechile/icon/ignition_off.png';
            }
            if (formatItem.icon_url != '') {
              pointAlls.push(formatItem);
            }
          });
        }
        that.pointList = pointAlls;
      });
    },
    clickHandler(e){
      alert(`单击点的坐标为：${e.point.lng}，${e.point.lat}`);
    },
    addPoints() {
      console.log('init');
    }
  }
};
</script>
